<template>
  <div class="gouwuche">
<!-- ============================================================================ -->
    <div v-if="!$store.state.islogin">
      <van-nav-bar  @click-left="fhy" title="购物详情" class="head" left-arrow/>
      <div>
        <van-empty image="error" description="请登录">
          <van-button round type="danger" class="bottom-button" to="/login">登录</van-button>
        </van-empty>
      </div>
    </div>
   <!--  ==================================================================-->
    <div v-else>
  <!-- {{ cc}} -->
     <!-- {{jsshopping}}   -->
      <!-- {{jsshopping}}     没有选择东西时为空--------------------------------------- -->
      <!-- <div v-if="my"> -->
        <div v-if="$store.state.jsshopping == 0">
        <!-- 导航栏 -->
         <van-nav-bar  @click-left="fhy" title="购物详情" class="head" left-arrow/>
        <!-- 中间空图片 -->
        <van-empty description="哇塞你的购物车清空了" />
        <!-- <van-button @click="ytl">有图了</van-button> -->
        <!-- 底部选项卡 --->
        <!-- <xrzp-tabbar></xrzp-tabbar> -->
      </div>
  <!-- 选择后底边的价格------------------------------------------------>
      <div v-else>
        <!-- {{$store.state.jsshopping}} -->

        <!-- else的头部 -->
        <van-nav-bar title="我的购物车" left-arrow @click-left="gwcLeft" />
      <van-checkbox-group v-model="outs" ref="sb">
      <!-- 卡片1 -->
      <!-- {{$store.state.jsshopping}} -->
      <!-- <van-swipe-cell  v-for="(item, i) of out" :key="i">$store.state.jsshopping -->
        <van-swipe-cell  v-for="(item, i) of jsshopping" :key="i">
        <van-card
          tag="推荐"
          price="15.00"
          :num="item.count"
          :title="item.name"
          :thumb="item.pic"
        >
        <!--  :desc="item.xzs" -->
          <!-- 标签卡槽 -->
          <template #tags>
            <van-tag plain type="danger">好吃</van-tag>
            <van-tag plain type="danger">好玩</van-tag>
            <van-tag plain type="danger">好喝</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="jian(item)">-</van-button>
            <van-button size="mini" @click="jia(item)">+</van-button>
              <!-- <van-button size="mini" @click.prevent="jian(i)">-</van-button>
            <van-button size="mini" @click.prevent="jia(i)">+</van-button> -->
          </template>
           <template #bottom>
            <!-- 选择按钮 -->
            <van-checkbox :name="i" @change="a">购买</van-checkbox>
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click= "sc(item)"/>
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
        <!-- 这是下边选项调试 -->
        

<!-- 底部订单--------------------------------------------------------------------------- -->
        <!-- <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit"> -->
           <van-submit-bar :price="jsshopping.length*1500" button-text="提交订单" @submit="onSubmit">
          <van-checkbox v-model="qx" @click="checkAll">全选</van-checkbox>
          <!-- <template #tip>
            你的收货地址不支持同城送,
            <span @click="xgdz">修改地址</span>
          </template> -->
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>
<script>
  import  {mapState}  from "vuex" 
// import LoginVue from './Login.vue';
export default {
  data() {
    return {
      qx:false,//全选按钮
      outs:[],//所有按钮的双向绑定
      count:1,
      // out: [
      //   {id:1,sl: 1,jg: "13.00",bt: "营养粥",xzs: "真的特别好吃",pic:require("../assets/wcf/22.jpg"),},
      //   {id:2,sl: 1,jg: "10.00", bt: "皮蛋粥",xzs: "诗性",pic:require("../assets/wcf/logo1.png"),},
      //   {id:3,sl: 1,jg: "12.00",bt: "南瓜粥",xzs: "球球厨窝",pic:require("../assets/wcf/logo2.png"),},
      //   {id:4,sl: 1,jg: "15.00",bt: "玉米南瓜粥",xzs: "绿色天使",pic:require("../assets/wcf/11.jpg"),},
      //   {id:6,sl: 1,jg: "13.00",bt: "八宝粥", xzs: "冯逍遥",pic:require("../assets/wcf/logo4.png"),},
      //   {id:7,sl: 1,jg: "11.00",bt: "海参粥",xzs: "小厨飘香",tj: "推荐",tj1: "好吃",tj2: "好玩",tj3: "好喝",pic:require("../assets/wcf/logo6.png"),},
      // ],
      cc:[],//vuex过来的数组
    
    };
  },
  // 计算属性
  computed:{
    ...mapState(["jsshopping"]),
  },

  //监听
  watch:{
    //监听outs里的按钮数量
    outs(){
     if(this.outs.length == this.jsshopping.length){
       this.qx=true
     }else{this.qx=false}
    },
    // ngly(){
    //   this.total = ngly.length*1500
    // },
    
  },
  methods: {
    //购物车没有商品的时候
    fhy(){this.$router.go(-1)},
    // 有图后的左边是//////////////////
    gwcLeft() {
      // this.$router.push("/xiangqing")
       this.$router.go(-1)
    },
  
    // 提交订单////////////////
    onSubmit() {this.$router.push("/wode");},
    // 修改地址//////////////
    // xgdz() {},

    //加
    jia(item) {
        item.count++
      }, 
    //减
    jian(item) {
      if ( item.count>1){
        item.count--
      }else if(item.count<=1){
        this.sc(item)
      }
    }, 

    //追加一个属性
    zjyige(){
      this. jsshopping.map(item=>{
        this.$set(item,'count',1)
      })
     
    },

    // count(){
      // var  sum=0;
      // this.$store.state.jsshopping.forEach(function(item){
      //     sum += item.sl*item.jg
      // })
      // this.total=parseFloat(sum*100)
    //   if( $store.state.jsshopping.length>0){
    //     this.total=parseFloat( $store.state.jsshopping.length*1500)}
    // },
    // // 调试选项
    checkAll() {
       //如果没有全选这个按钮全选
      if(this.qx!=false){
        this.$refs.sb.toggleAll(true);//全选
      }else{this.$refs.sb.toggleAll(false);//不全选
      }
    },
    //删除
    sc(item){
      this.jsshopping.splice(item,1)
      // $store.state.jsshopping
    },
    a(){},
  },

  mounted(){
    this.zjyige();
   
  },
};
</script>
<style>
.gouwuche {
  margin-bottom:60px;
}
/* 登录的样式 */
.gouwuche .bottom-button {
  width: 160px;
  height: 40px;
}
 .gouwuche .delete-button{
   height:100%
 }
</style>
